<template>
    <div class="login">
        <h1>Hello，歡迎回來</h1>
        <div class="tabs">
            <div class="tab-item" :class="activeTab == 0 ? 'active' : ''" @click='tabChange(0)'>
                手機登入
                <p ></p>
            </div>
            <div class="tab-item" :class="activeTab == 1 ? 'active' : ''" @click='tabChange(1)'>
                郵箱登錄
                <p ></p>
            </div>
        </div>
        <div class="container" v-if='activeTab == 0'>
            <el-input placeholder="手機號" v-model='telephone'></el-input>
            <el-input placeholder="密碼" type='password' v-model="password"></el-input>
            <el-button size='medium' type='primary' @click='loginHandle'>登入</el-button>
            <div class="s-b">
                <router-link to='/reg'>还没有账号？<a >注册</a></router-link>
                <router-link to='/forget-pwd' tag='a'>忘记密码</router-link>
            </div>
        </div>
        <!-- 邮箱登录 -->
        <div class="container" v-if='activeTab == 1'>
            <el-input placeholder="邮箱" v-model='email'></el-input>
            <el-input placeholder="密碼" type='password' v-model="password"></el-input>
            <el-button size='medium' type='primary' @click='loginHandle'>登入</el-button>
            <div class="s-b">
                <router-link to=''>还没有账号？<a >注册</a></router-link>
                <router-link to='/forget-pwd' tag='a'>忘记密码</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import { Login } from '@/api/user'
    export default {
        data() {
            return {
                activeTab : 0,
                telephone : null,
                password :null,
                email :null
            };
        },
        methods :{
            tabChange (tab) {
                this.activeTab = tab;
            },
            loginHandle () {
                if (this.activeTab == 0 && !this.telephone) {
                    this.$alert('請輸入手機號碼', '提示')
                    return;
                }
				if (this.activeTab == 1 && !this.email) {
					this.$alert('請輸入郵箱地址', '提示')
					return;
				}
                if (!this.password) {
                    this.$alert('請設定登入密碼', '提示')
                    return;
                }
				
					
				
                Login({
                    login_type : this.activeTab == 0 ? 'telephone' : 'email',
                    telephone : this.telephone,
                    password : this.password,
                    email :this.email
                }).then(res =>{
                    this.$store.commit('setUserInfo', res.result);
                    this.$router.replace('/')
                })
            }
        }
     }
</script>
<style lang="less" scoped>
    @import url('../assets/css/_b.less');
    @media screen and (max-width : 670px) {
        .login {
            background: #fff;
            padding: 40px 10px;
            h1 {
                text-align: center;
                font-size: 30px;
                color: rgb(9, 36, 68);
                font-family: "PingFang SC", sans-serif;
                line-height: normal;
                letter-spacing: 0.1px;
                margin-bottom: 44px;
                font-weight: 500;
            }
            .tabs {
                .f-s();
                width: 300px;
                margin : 0 auto;
                font-family: Cabin, sans-serif;
                font-size: 18px;
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                margin-bottom: 30px;
                color: rgba(9, 42, 68, 0.7);
                p {
                    width: 30px;
                    height: 4px;
                    background-color: #fff;
                    // margin-top: 10px;
                    display: block;
                    margin : 10px auto;
                    border-radius: 2px;
                    
                }
                div {
                    cursor: pointer;
                    width: 50%;
                    text-align: center;
                }
                .active {
                    color :@mainColor;
                    p {
                        background: @mainColor;
                    }
                }
            }
            .container {
                // width: 390px;
                margin: 0 auto;
                .el-input {
                    margin-bottom: 15px;
                }
                .el-button {
                    display: block;
                    width: 100%;
                    font-size: 20px;
                    padding: 15px 0;
                }
                .s-b {
                    margin-top: 15px;
                    a {
                        font-size: 14px;
                        color: @mainColor;
                    }
                    
                }
            }
        }
    }
    @media screen and (min-width : 670px) {
        .login {
            width: 1200px;
            box-shadow: rgba(225, 234, 240, 0.8) 0px 4px 8px 0px;
            background-color: rgb(255, 255, 255);
            margin: 90px auto 30px;
            padding: 40px 0px;
            h1 {
                text-align: center;
                font-size: 30px;
                color: rgb(9, 36, 68);
                font-family: "PingFang SC", sans-serif;
                line-height: normal;
                letter-spacing: 0.1px;
                margin-bottom: 44px;
                font-weight: 500;
            }
            .tabs {
                .f-s();
                width: 300px;
                margin : 0 auto;
                font-family: Cabin, sans-serif;
                font-size: 18px;
                font-weight: bold;
                line-height: normal;
                letter-spacing: normal;
                text-align: center;
                margin-bottom: 30px;
                color: rgba(9, 42, 68, 0.7);
                p {
                    width: 30px;
                    height: 4px;
                    background-color: #fff;
                    // margin-top: 10px;
                    display: block;
                    margin : 10px auto;
                    border-radius: 2px;
                    
                }
                div {
                    cursor: pointer;
                    width: 50%;
                    text-align: center;
                }
                .active {
                    color :@mainColor;
                    p {
                        background: @mainColor;
                    }
                }
            }
            .container {
                width: 390px;
                margin: 0 auto;
                .el-input {
                    margin-bottom: 15px;
                }
                .el-button {
                    display: block;
                    width: 100%;
                    font-size: 20px;
                    padding: 15px 0;
                }
                .s-b {
                    margin-top: 15px;
                    a {
                        font-size: 16px;
                        color: @mainColor;
                    }
                    
                }
            }
        }
    }
</style>